import React from 'react';
// import { AdjustSchedule } from '@/pages/Recruitment/containers/Schedule';
import { Button } from 'antd';
import { RangeDnD } from '@/pages/Recruitment/containers/ScheduleV2';
import { Calendar } from '@/pages/Recruitment/External/components';

const checkIntersection = (a, b) => {
    const min = a[0] < b[0] ? a : b;
    const max = min === a ? b : a;
    return min[1] > max[0];
};

export default function Demo() {
    const calendarRef = React.useRef(null);
    const defaultRangeList = [
        {
            id: 1,
            range: [0, 30],
            title: '新增的日程'
        }
    ];

    const staticRangeList = [
        {
            id: 1,
            range: [50, 80],
            title: '已有的日程'
        }
    ];

    const [rangeList, setRangeList] = React.useState(defaultRangeList);

    console.log(rangeList, '====结果====');

    const props = {
        height: 500,
        defaultRangeList,
        staticRangeList,
        // 自定义拖动项样式
        renderDragItem(item) {
            // 检查冲突
            const style = { height: '100%', backgroundColor: 'rgba(255, 162, 45, 0.3)' };
            if (staticRangeList.some(it => checkIntersection(it.range, item.range))) {
                style.backgroundColor = 'rgba(255,0,0,0.3)';
            }

            return <div style={style}>{item.title}</div>;
        },
        // 自定义对比项样式
        renderStaticItem(item) {
            return <div style={{ height: '100%', backgroundColor: 'rgba(0, 0, 0, 0.3)' }}>{item.title}</div>;
        },
        onRangeChange(nextRangeList) {
            setRangeList(nextRangeList);
        },
        // 可附加的数据
        onRangeAdd(item) {
            return { ...item, title: `新增的日程${item.id}` };
        }
    };
    return (
        <div style={{ background: '#fff', padding: '50px' }}>
            <Button
                onClick={() => {
                    const [err, v] = calendarRef.current.submit();
                    console.log('🚀 ~ Demo ~ err', err);
                    console.log('🚀 ~ Demo ~ v', v);
                }}
            >
                提交
            </Button>
            <Calendar ref={calendarRef} />
            <div style={{ height: 500 }}>
                <RangeDnD {...props} />
            </div>
        </div>
    );
}
